import React from 'react';
import Button from './components/Button';
import Alert from './components/Alert';
import Menu from './components/Menu';
import MenuItem from './components/Menu/MenuItem';
import SubMenu from './components/Menu/SubMenu';

const App: React.FC = () => {
  return (
    <div className="App">
      <Button>点击</Button>
      <Button disabled={true}>点击</Button>
      <Button disabled={true} size="lg">
        点击
      </Button>
      <Button disabled={true} size="sm">
        点击
      </Button>
      <Button size="lg" btnType="primary" onClick={() => console.log(111)}>
        Large button
      </Button>
      <Button btnType="link" href="http://www.baidu.com">
        点击
      </Button>
      <Button
        disabled={true}
        autoFocus
        btnType="link"
        href="http://www.baidu.com"
      >
        link 点击被禁用
      </Button>
      <br />

      <div style={{ width: '400px', margin: '20px auto' }}>
        <h2>alert</h2>
        <Alert message="alert info" />
        <Alert type="success" message="alert-message" />
        <Alert type="warning" message="alert-warning" />
        <Alert type="error" message="alert-error" />
        <Alert message="woshi message" showIcon={false} />
        <Alert type="error" message="error message" showIcon={false} />
        <Alert type="warning" message="warning message" showIcon={false} />
        <Alert
          type="success"
          message="success message"
          showIcon={false}
          closable
          description="Error Description Error Description Error Description Error Description Error Description Error Description"
        />
        <Alert
          type="info"
          message="success message"
          closable
          description="Error Description Error Description Error Description Error Description Error Description Error Description"
        />
        <Alert
          type="error"
          message="success message"
          closable
          description="Error Description Error Description Error Description Error Description Error Description Error Description"
        />
        <Alert
          type="warning"
          message="success message"
          closable
          description="Error Description Error Description Error Description Error Description Error Description Error Description"
        />
      </div>

      <div style={{ width: '400px', margin: '20px auto' }}>
        <h2>Menu</h2>
        <Menu defaultIndex={'0'} onSelect={(index) => alert(index)}>
          <MenuItem>链接1</MenuItem>
          <MenuItem>链接2</MenuItem>
          <MenuItem>链接3</MenuItem>
        </Menu>
        <div style={{ marginTop: '10px' }}>
          <Menu defaultIndex={'2'} mode="vertical" defaultOpenSubMenus={['0']}>
            <SubMenu title="链接1纵向">
              <MenuItem>链接1-1</MenuItem>
              <MenuItem>链接1-2</MenuItem>
              <MenuItem>链接1-3</MenuItem>
            </SubMenu>
            <SubMenu title="链接1纵向">
              <MenuItem>链接1-1</MenuItem>
              <MenuItem>链接1-2</MenuItem>
              <MenuItem>链接1-3</MenuItem>
            </SubMenu>
            <MenuItem>链接2</MenuItem>
            <MenuItem>链接3</MenuItem>
          </Menu>
        </div>
        <Menu
          defaultIndex={'0'}
          onSelect={(index) => alert(index)}
          mode="vertical"
        >
          <MenuItem>链接1</MenuItem>
          <MenuItem>链接2</MenuItem>
          <MenuItem>链接3</MenuItem>
        </Menu>
        <Menu defaultIndex={'0'}>
          <SubMenu title="链接1横向">
            <MenuItem>链接1-1</MenuItem>
            <MenuItem>链接1-2</MenuItem>
            <MenuItem>链接1-3</MenuItem>
          </SubMenu>
          <MenuItem>链接2</MenuItem>
          <MenuItem>链接3</MenuItem>
        </Menu>
      </div>
    </div>
  );
};

export default App;
